<script setup>
import { ref, onMounted } from 'vue'
import PageFullContainer from '@/components/pageFullContainer.vue'
import PaginationComponent from '@/components/PaginationComponent.vue'
import SearchComponent from '@/components/SearchComponent.vue'
import ListContainer from '@/components/ListContainer.vue'
import { getPostDataService } from '@/apis/post'

// 存储景点攻略信息
const sceneryPost = ref([])

// 控制loading加载的开启和关闭
const isLoading = ref(false)

// 实现分页需要的参数
const pageSize = ref(5)
const page = ref(1)
const total = ref(null)

// 获取景点攻略需要的参数
const sceneryItem = ref({
  pageSize: pageSize.value,
  page: page.value,
  type: 'scenery'
})

// 获取景点攻略信息
const getSceneryPost = async () => {
  const res = await getPostDataService(sceneryItem.value)
  sceneryPost.value = res.data.rows
  total.value = res.data.count
}

// 处理页码变化
const handlePageChange = (newPage) => {
  sceneryItem.value.page = newPage
  getSceneryPost()
}

// 处理页面显示数据条数的变化
const handlePageSizeChange = (newSize) => {
  sceneryItem.value.pageSize = newSize
  getSceneryPost()
}

// 处理搜索结果
const handleSearch = (data) => {
  sceneryPost.value = data
}

onMounted(async () => {
  isLoading.value = true
  await getSceneryPost()
  isLoading.value = false
})
</script>

<template>
  <PageFullContainer
    title="景点攻略"
    v-loading="isLoading"
    element-loading-text="Loading..."
  >
    <template #extra>
      <!-- 顶部搜索区域 -->
      <SearchComponent
        type_key="景点"
        template_key="post"
        @reset="getSceneryPost"
        @search="handleSearch"
      >
      </SearchComponent>
    </template>

    <ListContainer
      :list="sceneryPost"
      type_key="景点"
      template_key="post"
      @update-list="getSceneryPost"
    >
    </ListContainer>

    <template #footer>
      <!-- 分页区域 -->
      <PaginationComponent
        :total="total"
        @pageChange="handlePageChange"
        @pageSizeChange="handlePageSizeChange"
      >
      </PaginationComponent>
    </template>
  </PageFullContainer>
</template>

<style lang="scss" scoped></style>
